import { CheckCircleTwoTone, UserOutlined } from "@ant-design/icons";
import { ProCard } from "@ant-design/pro-components";
import {
  Button,
  Card,
  DatePicker,
  Drawer,
  Form,
  Input,
  Result,
  Select,
  Steps,
  Typography,
  message,
} from "antd";

import React, { useState } from "react";

import "./index.less";

const { Title } = Typography;

const Page45: React.FC = () => {
  const [current, setCurrent] = useState(0);
  const [form] = Form.useForm();
  const [finished, setFinished] = useState(false);
  const [open, setOpen] = useState(false);

  const next = async () => {
    try {
      await form.validateFields();
      setCurrent((c) => c + 1);
    } catch {
      // Form validation failed
    }
  };

  const prev = () => setCurrent((c) => c - 1);

  const onSubmit = async () => {
    const values = await form.validateFields();
    console.log(values);
    setOpen(false);
    message.success("提交成功");
    setFinished(true);
  };

  return (
    <div className="page45-page">
      <Title level={2} className="page-title">
        多步骤向导流程
      </Title>
      {finished ? (
        <Result
          icon={<CheckCircleTwoTone twoToneColor="#52c41a" />}
          title="流程完成！"
          subTitle="您的申请信息已提交，等待审核"
          extra={
            <Button
              onClick={() => {
                setFinished(false);
                setCurrent(0);
                form.resetFields();
              }}
            >
              重新开始
            </Button>
          }
        />
      ) : (
        <ProCard gutter={16}>
          <Card>
            <Steps
              current={current}
              items={[
                { title: "基本信息" },
                { title: "详细资料" },
                { title: "确认提交" },
              ]}
              style={{ marginBottom: 24 }}
            />

            <Form form={form} layout="vertical">
              {current === 0 && (
                <>
                  <Form.Item
                    name="name"
                    label="姓名"
                    rules={[{ required: true }]}
                  >
                    <Input prefix={<UserOutlined />} placeholder="请输入姓名" />
                  </Form.Item>
                  <Form.Item
                    name="email"
                    label="邮箱"
                    rules={[{ type: "email", required: true }]}
                  >
                    <Input placeholder="请输入邮箱" />
                  </Form.Item>
                </>
              )}
              {current === 1 && (
                <>
                  <Form.Item
                    name="city"
                    label="所在城市"
                    rules={[{ required: true }]}
                  >
                    <Select
                      options={[
                        { value: "beijing", label: "北京" },
                        { value: "shanghai", label: "上海" },
                      ]}
                    />
                  </Form.Item>
                  <Form.Item
                    name="date"
                    label="预约日期"
                    rules={[{ required: true }]}
                  >
                    <DatePicker style={{ width: "100%" }} />
                  </Form.Item>
                </>
              )}
              {current === 2 && (
                <Result
                  status="info"
                  title="请确认信息后提交"
                  subTitle="点击提交会打开确认抽屉"
                />
              )}
            </Form>

            <div
              style={{ display: "flex", justifyContent: "flex-end", gap: 8 }}
            >
              {current > 0 && <Button onClick={prev}>上一步</Button>}
              {current < 2 && (
                <Button type="primary" onClick={next}>
                  下一步
                </Button>
              )}
              {current === 2 && (
                <Button type="primary" onClick={() => setOpen(true)}>
                  提交
                </Button>
              )}
            </div>
          </Card>
        </ProCard>
      )}

      <Drawer
        title="提交确认"
        open={open}
        onClose={() => setOpen(false)}
        width={380}
        extra={
          <Button type="primary" onClick={onSubmit}>
            确认提交
          </Button>
        }
      >
        请确认无误后提交，提交后将进入审核流程。
      </Drawer>
    </div>
  );
};

export default Page45;
